 <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="https:d3js.org/d3.v6.min.js"></script>
    </head>
    <body>
        
	<script>
var palette = [
                    '#2ec7c9', '#b6a2de', '#5ab1ef', '#ffb980', '#d87a80',
                    '#8d98b3', '#e5cf0d', '#97b552', '#95706d', '#dc69aa',
                    '#07a2a4', '#9a7fd1', '#588dd5', '#f5994e', '#c05050',
                    '#59678c', '#c9ab00', '#7eb00a', '#6f5553', '#c14089'
                ]
 	  var data=[1,1,1,1,1,1,1,1,1,1,1,1]
	  var pie = d3.pie()
	  var inner = 100;
	  var outer = 200;
	  var aa = 100;
	  var arcs = d3.arc()
	    .innerRadius(inner)
	    .outerRadius(outer+aa)
	  var svg = d3.select('body')
	    .append('svg')
	    .attr('width',600)
	    .attr('height',600)

	  var g = svg.selectAll('g')
	    .data(pie(data))
	    .join('g')
	    .attr('transform','translate('+300+','+300+')')
	    

	  g.append('path')
	  .attr('d',function(d){aa-=10; console.log(aa); var arcs = d3.arc()
	    .innerRadius(inner)
	    .outerRadius(outer+aa);
	      return arcs(d)})
	    .attr('fill', function(d, i) {
                return palette[i];
             }).call(d3.zoom().on("zoom", function () { 
                   svg.attr("transform", d3.transform) 
                })) 
	

	  
	</script>
    </body>
</html>